<template>
  <section>
    <div class="button-group">
      <!-- <el-button type="primary" @click="showAddDialog">新增</el-button> -->
    </div>
    <ft-table
      ref="ipTable"
      :data="ips"
      :columns="ipColumns"
      :cell-style="{background: 'rgba(84, 92, 100, 0.25)'}"

    >
      <template #operation="{ row }" v-if="userInfo.is_admin == 0">
        <i
          class="el-icon-edit-outline color-blue left-space"
          @click="showEditDialog(row)"
        ></i>
        <!-- <i class="el-icon-delete color-danger left-space" @click="delIp(row)"></i> -->
      </template>
    </ft-table>

    <el-drawer
      ref="drawer"
      :visible.sync="showDrawer"
      @open="beforeOpenDrawer"
      :with-header="false"
    >
      <h3>{{drawerTitle}}</h3>
      <el-form  label-width="100px" :rules="rules">

        <el-form-item label="dncp">
          <el-select v-model="ip.dncp">
            <el-option 
              v-for="item in SYS_PARAMS.dncp"
              :key="item.id"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="IP地址">
          <el-input v-model="ip.ip"></el-input>
        </el-form-item>

        <el-form-item label="子网掩码">
          <el-input v-model="ip.nmk"></el-input>
        </el-form-item>

        <el-form-item label="网关IP">
          <el-input v-model="ip.gw"></el-input>
        </el-form-item>
        <el-form-item label="dns1">
          <el-input v-model="ip.dns1" ></el-input>
        </el-form-item>
        <el-form-item label="dns2">
          <el-input v-model="ip.dns2" ></el-input>
        </el-form-item>
        <el-form-item label="mac地址">
          <el-input v-model="ip.mac" disabled></el-input>
        </el-form-item>
      </el-form>

      <div class="drawer__footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </el-drawer>
  </section>
</template>
<script>
import {mapGetters} from 'vuex';
import {
  getIpConfigApi, 
  // addIpApi, 
  updateIpConfigApi,
  // delIpApi
  } from '@/api/ip.js';

export default {
  name: 'ip',
  data(){
    return {
      ips: [],
      ip: {
        dncp: 0,
        ip: '',
        nmk: '',
        gw: '',
        dns1: '',
        dns2: ''
      },
      ipColumns:[
        {prop: 'dncp', label: 'dncp', align: 'center'},
        {prop: 'ip', label: 'IP地址', align: 'center'},
        {prop: 'nmk', label: '子网掩码', align: 'center'},
        {prop: 'gw', label: '网关IP', align: 'center'},
        {prop: 'dns1', label: 'dns1', align: 'center'},
        {prop: 'dns2', label: 'dns2', align: 'center'},
        {prop: 'operation', label: '操作', align: 'center', slot: true},
      ],
      showDrawer: false,
      drawerTitle: '新增网关',
      loading: false,
      rules: {

      }
    }
  },
  computed: {
    ...mapGetters(['SYS_PARAMS', 'userInfo'])
  },
  mounted(){
    this.refreshIp();
  },
  methods: {
    refreshIp(){
      getIpConfigApi().then(res =>{
        if(res.code == 0 ){
          this.showDrawer = false;
          this.ips = res.data;
        }
      })
    },
    showAddDialog(){
      this.showDrawer = true;
      this.drawerTitle = '新增IP';
      this.ip = {
        dncp: 0,
        ip: '',
        nmk: '',
        gw: '',
        dns1: '',
        dns2: ''
      }
    },
    showEditDialog(row){
      this.showDrawer = true;
      this.drawerTitle = '编辑IP';
      this.ip = row;
    },
    addIp(){
      addIpApi(this.ip).then(res => {
        this.loading = false;
        if(res.code == 0){
          this.$message({type: 'success', message: '提交成功'})
          this.showDrawer = false;
          this.refreshIp();
        }
      })
    },
   updateIp(){
     updateIpConfigApi(this.ip).then(res => {
        this.loading = false;
        if(res.code == 0){
          this.$message({type: 'success', message: '提交成功'})
          this.showDrawer = false;
          this.refreshIp();
        }
      })
    },
    delIp(){
      delIpApi().then(res =>{
        if(res.code == 0 ){
          this.refreshIp();
        }
      })
    },
    beforeOpenDrawer(){
      this.loading = false;
    },
    cancel(){
      this.showDrawer = false;
    },
    confirm(){
      this.loading = true;
      if(this.ip.id) this.updateIp()
      else this.addIp()
    }
  }

}
</script>
<style  scoped>
.button-group{
 display: flex;
 justify-content: flex-end;
 padding: 10px;
}
.drawer__footer{
  margin-left: 30px;
}
</style>
